<template>
	<view class="all">
		<view class="order">
			<text>我的订单</text>
		</view>
		<!-- 顶部 -->
		<view class="title">
			<text :class="num == 1 ? 'bule':''"  @click="changePage(1)">全部</text>
			<text :class="num == 2 ? 'bule':''"  @click="changePage(2)">待收货</text>
			<text :class="num == 3 ? 'bule':''" @click="changePage(3)">待收货</text>
			<text :class="num == 4 ? 'bule':''" @click="changePage(4)">待评价</text>
			<text :class="num == 5 ? 'bule':''" @click="changePage(5)">售后</text>
		</view>
		<!-- 内容区 -->
		<!-- 全部 -->
		<view class="content" :class="num == 1 ? '':'change'">
			<view class="content-one">
				<view class="one-top">
					<view class="one-left">
						<image src="../../static/images/cys/mine-3.jpg" mode=""></image>
					</view>
					<view class="one-center">
						<text>2018年新款冲锋衣秋冬
							款新品推荐 户外冲锋衣</text>
						<text>红色</text>
						<text>L</text>
					</view>
					<view class="one-right">
						<text>￥ 229</text>
						<text>× 1</text>
					</view>
				</view>
				<view class="two-top">
					<text>共 1件商品,合计：￥229</text>
					<text>待付款</text>
					<text>取消订单</text>
					<text>付款</text>
				</view>
			</view>
			<view class="content-one">
				<view class="one-top">
					<view class="one-left">
						<image src="../../static/images/cys/mine-3.jpg" mode=""></image>
					</view>
					<view class="one-center">
						<text>2018年新款冲锋衣秋冬
							款新品推荐 户外冲锋衣</text>
						<text>红色</text>
						<text>L</text>
					</view>
					<view class="one-right">
						<text>￥ 229</text>
						<text>× 1</text>
					</view>
				</view>
				<view class="two-top">
					<text>共 1件商品,合计：￥229</text>
					<text>待付款</text>
					<text>取消订单</text>
					<text>付款</text>
				</view>
			</view>
		</view>
		<!-- 待付款 -->
		<view class="content" :class="num == 2 ? '':'change'">
			<view class="content-one">
				<view class="one-top">
					<view class="one-left">
						<image src="../../static/images/cys/mine-3.jpg" mode=""></image>
					</view>
					<view class="one-center">
						<text>2018年新款冲锋衣秋冬
							款新品推荐 户外冲锋衣</text>
						<text>红色</text>
						<text>L</text>
					</view>
					<view class="one-right">
						<text>￥ 229</text>
						<text>× 1</text>
					</view>
				</view>
				<view class="two-top">
					<text>共 1件商品,合计：￥229</text>
					<text>待付款</text>
					<text>取消订单</text>
					<text>付款</text>
				</view>
			</view>
		</view>
		<!-- 待收货 -->
		<view class="content" :class="num == 3 ? '':'change'">
			<view class="content-one">
				<view class="one-top">
					<view class="one-left">
						<image src="../../static/images/cys/mine-3.jpg" mode=""></image>
					</view>
					<view class="one-center">
						<text>2018年新款冲锋衣秋冬
							款新品推荐 户外冲锋衣</text>
						<text>红色</text>
						<text>L</text>
					</view>
					<view class="one-right">
						<text>￥ 229</text>
						<text>× 1</text>
					</view>
				</view>
				<view class="two-top">
					<text>共 1件商品,合计：￥229</text>
					<text>待付款</text>
					<text>取消订单</text>
					<text>付款</text>
				</view>
			</view>
		</view>
		<!-- 待评价 -->
		<view class="content" :class="num == 4 ? '':'change'">
			<view class="content-one">
				<view class="one-top">
					<view class="one-left">
						<image src="../../static/images/cys/mine-3.jpg" mode=""></image>
					</view>
					<view class="one-center">
						<text>2018年新款冲锋衣秋冬
							款新品推荐 户外冲锋衣</text>
						<text>红色</text>
						<text>L</text>
					</view>
					<view class="one-right">
						<text>￥ 229</text>
						<text>× 1</text>
					</view>
				</view>
				<view class="two-top">
					<text>共 1件商品,合计：￥229</text>
					<text>待付款</text>
					<text>取消订单</text>
					<text>付款</text>
				</view>
			</view>
		</view>
		<!-- 售后 -->
		<view class="content" :class="num == 5 ? '':'change'">
			<view class="content-one">
				<view class="one-top">
					<view class="one-left">
						<image src="../../static/images/cys/mine-3.jpg" mode=""></image>
					</view>
					<view class="one-center">
						<text>2018年新款冲锋衣秋冬
							款新品推荐 户外冲锋衣</text>
						<text>红色</text>
						<text>L</text>
					</view>
					<view class="one-right">
						<text>￥ 229</text>
						<text>× 1</text>
					</view>
				</view>
				<view class="two-top">
					<text>共 1件商品,合计：￥229</text>
					<text>待付款</text>
					<text>取消订单</text>
					<text>付款</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				num:1
			}
		},
		methods:{
			changePage(a){
				// console.log(1);
				this.num = a;
				console.log(this.num);
			}
		}
	}
</script>

<style>
	.all {
		width: 750rpx;
		margin: auto;
	}
	
	.order{
		width: 750rpx;
		height: 70rpx;
		line-height: 60rpx;
		text-align: center;
		margin-top: 50rpx;
		margin-bottom: 15rpx;
		border-bottom: 2px solid #E8E8E8;
	}

	.title {
		width: 720rpx;
		height: 60rpx;
		margin-left: 15rpx;
		display: flex;
		justify-content: space-between;
	}

	.title>text {
		width: 144rpx;
		height: 55rpx;
		
		line-height: 60rpx;
		display: block;
		text-align: center;
	}
	.bule{
		border-bottom: 2px solid #999999;
	}
	.content {
		width: 720rpx;
		margin-left: 15rpx;
	}

	.content-one {
		width: 720rpx;
		height: 350rpx;
		padding-top: 50rpx;
	}

	.one-top {
		width: 720rpx;
		height: 200rpx;
		display: flex;
	}

	.one-left {
		width: 180rpx;
		height: 180rpx;
		margin-right: 15rpx;

	}

	.one-left>image {
		width: 170rpx;
		height: 170rpx;
		margin-left: 10rpx;
	}

	.one-center {
		width: 400rpx;
		height: 170rpx;
	}

	.one-center>text:nth-of-type(1) {
		margin-top: 15rpx;
		display: block;
		font-size: 13px;
		margin-bottom: 16rpx;
	}

	.one-center>text:nth-of-type(2) {
		margin-top: 15rpx;
		font-size: 13px;
		color: #9FA19F;
		margin-left: 5rpx;
		margin-right: 30rpx;
		display: inline-block;
	}

	.one-center>text:nth-of-type(3) {
		font-size: 13px;
		color: #9FA19F;
	}

	.one-right {
		width: 140rpx;
		height: 170rpx;
	}

	.one-right>text:nth-of-type(1) {
		display: block;
		font-size: 13px;
		margin-top: 30rpx;
		margin-bottom: 20rpx;
	}

	.one-right>text:nth-of-type(2) {
		color: #9FA19F;
		font-size: 13px;
		padding-left: 45rpx;

	}
	.two-top{
		width: 720rpx;
		height: 200rpx;
	}
	.two-top>text:nth-of-type(1){
		display: block;
		font-size: 13px;
		margin-left: 340rpx;
	}
	.two-top>text:nth-of-type(2){
		font-size: 13px;
		color: #FF0000;
		display: inline-block;
		margin-left: 10rpx;
	}
	.two-top>text:nth-of-type(3){
		width: 150rpx;
		height: 50rpx;
		font-size: 13px;
		line-height: 50rpx;
		text-align: center;
		border-radius: 50rpx;
		display: inline-block;
		color: #999999;
		border: 1px solid #E4E4E4;
		margin-left: 230rpx;
		margin-top: 20rpx;
	}
	.two-top>text:nth-of-type(4){
		width: 150rpx;
		height: 50rpx;
		font-size: 13px;
		line-height: 50rpx;
		text-align: center;
		border-radius: 50rpx;
		display: inline-block;
		border: 1px solid black;
		margin-left: 40rpx;
	}
	.change{
		display: none;
	}
</style>
